<template>
  <!-- 专场女装 -->
  <div class="new-product clearfix">
    <div class="new-patterns" v-if="indexFloor.isViewName == '1'">
      <div class="tagI fl" :style="styleCss(indexFloor)"></div>
      <div class="font-title fl" v-text="indexFloor.gf_name"></div>
      <div class="font-e-title fl">{{indexFloor.en_name | toUpperCase}}</div>
      <ul class="new-pattern-nav fr">
        <li 
          v-for="(hot, index) in keyWords" 
          :key="index" 
          v-text="hot"  
          @click.stop="indexFloorJump('keyWord', hot)">
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
    <div class="special-father" v-if="indexFloor.wide_goods">
      <div class="clearfix">
        <div class="special-product-content bgc clearfix">
          <div class="special-product-right fl" 
            @click.stop="indexFloorJump(JSON.parse(indexFloor.wide_goods)[0].left.type, JSON.parse(indexFloor.wide_goods)[0].left.value)">
            <div class="special-product-right-img img transition-ease">
              <img v-lazy="JSON.parse(indexFloor.wide_goods)[0].left.img" class="add-img">
              <div class="float-info-background" :style="background(indexFloor)"></div>
              <div class="float-info">
                <div class="float-title">
                  <div class="fla"></div>
                  <p class="fla" v-text="JSON.parse(indexFloor.wide_goods)[0].left.titleName"></p>
                  <div class="fla"></div>
                </div>
                <div class="float-content" v-text="JSON.parse(indexFloor.wide_goods)[0].left.subtitleName"></div>
              </div>
            </div>
          </div>
          <div class="fl">
            <ul class="special-product-middle">
              <li class="special-content-s-p transition-ease fl img" 
                v-for="(pic,index) in JSON.parse(indexFloor.wide_goods)[1].middle.goodsList" 
                :key="index" 
                @click.stop="indexFloorJump(pic.type, pic.value)"
                :style="{ 'margin-bottom': `${index >= 3 ? '0px' : '14px' }`}">
                <img v-lazy="pic.img" class="add-img">
              </li>
            </ul>
          </div>
          <div class="special-product-left fl">
            <div class="special-product-left-content" 
              v-for="(rightPc,index) in JSON.parse(indexFloor.wide_goods)[2].right.goodsList" 
              :key="index"
              @click.stop="indexFloorJump(rightPc.type, rightPc.value)"
              :style="{ 'margin-bottom': `${index == 2 ? '0px' : '12px' }`}">
              <div class="fl fix-width">
                <p v-text="rightPc.titleName"></p>
                <p v-text="rightPc.desc" :style="colr(indexFloor)"></p>
              </div>
              <div class="special-product-left-picture fr img" @click.stop="indexFloorJump(rightPc.type, rightPc.value)">
                <img v-lazy="rightPc.img" class="imgs-ds">
              </div>
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      indexFloor: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    computed: {
      // 判断关键字
      keyWords() {
        if (this.indexFloor.keyWord) {
          return this.indexFloor.keyWord.split(',')
        }
      }
    },
    methods: {
      // 跳转对应页面(商品详情或者搜索页面)
      indexFloorJump(type, id, index) {
        if (index != 0 && index) {
          return
        }
        switch (type) {
          case 'goodsInfo': // 进入商品详情
            window.open('/goods/detail/' + id)
            break
          case 'channel': // 频道
            this.$emit('on-floor-channel', id)
            break
          case 'store': // 进入店铺
            this.intoStore(id)
            break
          case 'link': // 进入链接
            window.open(id.replace('/#', ''))
            break
          case 'goodsList': // 进入商品列表
            sessionStorage.setItem('goodsIds', id)
            window.open('/search/goodsLists')
            break
          case 'storeSearch':
            window.open(`/search/stores?type=stores&st=2&key=${decodeURIComponent(encodeURIComponent(id))}`)
            break
          default:
            if (type == 'brandSearch') {
              window.open(`/search/goods?type=goods&st=3&name=${decodeURIComponent(encodeURIComponent(id))}&ob=`)
            } else {
              let gsId = Number(this.indexFloor.gcId)
              if (isNaN(gsId) || !gsId) {
                window.open(`/search/goods?type=goods&st=1&key=${decodeURIComponent(encodeURIComponent(id))}&ob=`)
                return
              }
              window.open(`/search/goods?type=goods&st=1&key=${decodeURIComponent(encodeURIComponent(id))}&ob=&gs=${gsId}`)
            }
        }
      },
      // 进入对应商家店铺
      intoStore(id) {
        window.open('/shop/' + id)
      },
      /**
       * css样式
       */
      styleCss(indexFloor) {
        return {'border': '2px solid #' + indexFloor.gf_css}
      },
      // 背景颜色
      background(indexFloor) {
        return {'background': '#' + indexFloor.gf_css}
      },
      // 字体颜色
      colr(indexFloor) {
        return {'color': '#' + indexFloor.gf_css}
      },
      // 边框颜色
      border(indexFloor) {
        return {'border': '1px solid #' + indexFloor.gf_css}
      }
    },
    filters: {
      /**
       * 大写
       */
      toUpperCase(val) {
        if (val) {
          return val.toUpperCase()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>